<template>
  <div>
  <div class="place-name" @click="openChoose">
    {{placeName}} <img class="direct" v-bind:style="{'transform': 'rotate('+ deg +'deg)'}" src="../../assets/img/home/direct.png">
  </div>
  <div v-bind:style="{'height': listHeight + 'rem'}" class="list">
    <div class="list-scroll">
      <div class="head">
        <div
          class="address-box"
          v-bind:class="{'choose':placeCode==='all'}"
          key="all"
          @click="chooseItem('all', '全部设备')"
          v-show="showAll === 'true'"
        >
          <div class="box-head">{{unBind.placeName}}</div>
          <div class="box-msg">
            <div class="box-left">
              <div class="dev-number">
                <span>全部设备</span>
              </div>
              <div class="box-bottom-msg">当前地址</div>
            </div>
          </div>
        </div>
        <div
          class="address-box"
          v-bind:class="{'choose':placeCode===unBind.placeCode}"
          :key="unBind.placeCode"
          v-if="unBind.bindNum !== 0 && showDefault !=='no'"
          @click="chooseItem(unBind.placeCode, unBind.placeName)"
        >
          <div class="box-head">{{unBind.placeName}}</div>
          <div class="box-msg">
            <div class="box-left">
              <div class="dev-number">
                <span>{{unBind.bindNum}}</span>台
              </div>
              <div class="box-bottom-msg">设备数量</div>
            </div>
<!--            <div class="box-right">
              <div class="dev-number">
                <span>{{unBind.placeFlow}}</span>G
              </div>
              <div class="box-bottom-msg">可用流量</div>
            </div>-->
          </div>
        </div>
        <div
          v-for="(item) in PLACELIST"
          class="address-box"
          v-bind:class="{'choose':placeCode===item.placeCode}"
          v-if="item.bindNum > 0 "
          :key="item.placeCode"
          @click="chooseItem(item.placeCode, item.placeName)"
        >
          <div class="box-head">{{item.placeName}}</div>
          <div class="box-msg">
            <div class="box-left">
              <div class="dev-number">
                <span>{{item.bindNum}}</span>台
              </div>
              <div class="box-bottom-msg">设备数量</div>
            </div>
            <!--<div class="box-right">-->
              <!--<div class="dev-number">-->
                <!--<span>{{item.placeFlow}}</span>G-->
              <!--</div>-->
              <!--<div class="box-bottom-msg">可用流量</div>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {PLACELIST} from '../../api/request'
import { Toast } from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'select',
  props: ['closed', 'showDefault', 'showAll'],
  data () {
    return {
      placeCode: '200',
      placeName: '第一步:选择地址',
      isShow: true,
      PLACELIST: null,
      unBind: {}
    }
  },
  created () {
    PLACELIST(this.$store.state.user.userId).then(
      res => {
        if (res.data.code === 200) {
          this.PLACELIST = res.data.data
          this.unBind = res.data.unbindDev
        } else {
          this.unBind = { bindNum: 0 }
          Toast({mes: '暂无设备', timeout: 1000})
        }
      }
    )
  },
  methods: {
    chooseItem: function (code, placeName) {
      this.placeName = placeName
      this.placeCode = code
      this.isShow = false
      this.$emit('showDev', code, placeName)
    },
    openChoose: function () {
      this.isShow = !this.isShow
      this.$emit('changeChild')
    }
  },
  computed: {
    deg: function () {
      if (this.isShow && this.closed) {
        return 90
      } else {
        return 0
      }
    },
    listHeight: function () {
      if (this.isShow && this.closed) {
        return 3
      } else {
        return 0
      }
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/select.css";
  .choose .box-head{
   background-color: #8bdef9;
    border-bottom: 1px solid #fff;
  }
  .choose .box-msg{
    background-color: #00c0f8;
    color: #fff;
  }
  .place-name {
    height: 0.92rem;
    line-height: 0.92rem;
    font-size: 0.36rem;
    color: #505050;
    padding-left: 0.24rem;
    padding-right: 0.5rem;
    vertical-align: middle;
    background-color: #fff;
  }
  .direct{
    width: 0.17rem;
    height: 0.31rem;
    float: right;
    vertical-align: middle;
    margin-top: 0.29rem;
    transition:transform 1s
  }
</style>
